﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body onload="ReceiveMessage()">
<form id="form1">
<div>
   <!--Web SocketAPI-->
    <fieldset>
        <legend>使用postMessage实现跨文档传输数据</legend>
        <!--在JS中，出于安全考虑不允许跨域访问其他页面中的元素，HTML5中可以用对象的postMessage方法进行数据的传递-->
        <input type="number" id="txtNum" />
        <input type="button" value="Request" onclick="btnSendMessage()" />
        <label id="lblReceive"></label>
        <iframe id="ifr1" src="MessageFrame.html" width="300" height="180" frameborder="1"></iframe>

    </fieldset>

</div>

</form>
<script type="text/javascript">
    //使用postMessage实现跨文档传输数据
    //给页面注册一个处理接收信息的事件
    function ReceiveMessage() {        
        window.onmessage = function (e) {
            //可以用e.origin == http://localhost 来判断请求的来源
            document.getElementById('lblReceive').innerHTML = e.origin + " say: " + e.data;
        }
    }
    function btnSendMessage() {
        var strSend = document.getElementById('txtNum').value;
        if (strSend.length > 0)
        {
            //                                                      (发送的信息, 限制接收范围,如果用*则表示无限制)
            document.getElementById('ifr1').contentWindow.postMessage(strSend, '*');
            document.getElementById('txtNum').value = '';
        }
    }

</script>
</body>
</html>
